/**
 * @Description:
 * @Author: skj
 */
import React, {Component} from "react";
import {View, StyleSheet,ImageBackground,Text,TouchableOpacity} from "react-native";
import PropTypes from "prop-types";
import Device from "@greens/device/src/device";
import {designRateW} from "../../../../device/src/device";

export default class ColorItemCell extends Component {
	constructor(props) {
		super(props);
	}

	//属性传参
	static propTypes = {
		image:PropTypes.number.isRequired,
		title:PropTypes.string.isRequired,
		titleColor:PropTypes.string.isRequired,
		onPress:PropTypes.func
	};
	//默认属性
	static defaultProps = {};

	componentDidMount() {
	}

	render() {
		const {image,title,titleColor,onPress} = this.props;
		return (
			<View style={styles.container}>
				<TouchableOpacity activeOpacity={0.7} onPress={onPress}>
					<ImageBackground source={image} style={styles.imageStyle} resizeMode={'cover'}>
						<Text style={[styles.titleStyle,{color:titleColor}]}>{title}</Text>
					</ImageBackground>
				</TouchableOpacity>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#ffffff',
		alignItems:'center',
		justifyContent:'center',
		flex:1,
	},
	imageStyle:{
		borderRadius:2.5,
		backgroundColor:'#ffffff',
		justifyContent:'center',
		alignItems:'center',
		width:Math.floor(Device.SCREEN_WIDTH/2.0-22.5),
		height:designRateW*40
	},
	titleStyle:{
		fontSize:15,
		textAlign:'center'
	},
});
